// 定义全局混合
@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

@mixin flex-direction($direction: row) {  
  display: flex;  
  flex-direction: $direction;  
} 

@mixin flex-wrap($wrap: nowrap) {  
  flex-wrap: $wrap;  
}  

@mixin margin($top: 0, $right: 0, $bottom: 0, $left: 0) {  
  margin: $top $right $bottom $left;  
} 

@mixin padding($top: 0, $right: 0, $bottom: 0, $left: 0) {  
  padding: $top $right $bottom $left;  
} 

@mixin border-radius($radius: 5px) {  
  border-radius: $radius;  
} 

@mixin box-shadow($horizontal: 0, $vertical: 0, $blur: 2px, $spread: 0, $color: rgba(0, 0, 0, 0.5)) {  
  box-shadow: $horizontal $vertical $blur $spread $color;  
}  

@mixin font-size($size) {  
  font-size: $size;  
  font-size: ($size / $base-font-size) * 1rem;  
} 